<template>
<div>
<!--  面包屑区域-->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    <el-breadcrumb-item>订单列表</el-breadcrumb-item>
  </el-breadcrumb>
<!--  卡片区域-->
  <el-card>
<!--    搜索区域-->
    <el-row>
      <el-col :span="10">
        <el-input placeholder="请输入内容"  class="input-with-select" clearable v-model="queryInfo.query">
          <el-button slot="append" icon="el-icon-search" ></el-button>
        </el-input>
      </el-col>
    </el-row>
<!--    表单区域-->
    <el-table
        border
        style="width: 100%"
    :data="orderList">
      <el-table-column type="index"></el-table-column>
      <el-table-column
          prop="order_number"
          label="订单编号"
         >
      </el-table-column>
      <el-table-column
          prop="order_price"
          label="订单价格"
      >
      </el-table-column>
      <el-table-column
          label="是否付款"
      >
        <template slot-scope="scope">
          <el-tag  v-if="scope.row.order_pay==='0'">未付款</el-tag>
          <el-tag  v-else type="danger">已付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="is_send"
          label="是否发货"
      >
      </el-table-column>
      <el-table-column
          label="发货时间"
      >
        <template slot-scope="scope">
          {{scope.row.create_time |dateFormat}}
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="220px"
      >
        <template>
          <el-button class="el-icon-edit" type="primary" @click="showShipingAddress">修改地址</el-button>


          <el-button class="el-icon-location" type="primary" @click="showProgressDialog">查看物流</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </el-card>
<!--  展示修改物流地址的对话框-->
  <el-dialog
      title="修改地址"
      :visible.sync="addressVisble"
      width="50%"
      @close="editFormClosed"
      >
<!--   表单区域-->
    <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
      <el-form-item label="省市区/县" prop="address1">
        <el-cascader :options="cityData" v-model="editForm.address1"></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address2">
        <el-input v-model="editForm.address2"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="addressVisble = false">取 消</el-button>
    <el-button type="primary" @click="">确 定</el-button>
  </span>
  </el-dialog>
<!--  物流详情对话框-->
  <el-dialog
      title="物流详情"
      :visible.sync="progressDialog"
      width="50%"

  >

    <el-timeline >
      <el-timeline-item
          v-for="(activity, index) in progressInfo"
          :key="index"
          :timestamp="activity.time">
        {{activity.context}}
      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</div>
</template>

<script>
import cityData from './citydata'
import modifyData from '../../assets/db.json'
export default {
name: "order",
  data(){
    return{
      // 获取订单列表请求的参数
      queryInfo:{
        query:'',
        pagenum:1,
        pagesize:10
      },
      // 总的订单数量
      total:0,

      // 商品订单列表数据
      orderList:[],
      addressVisble:false,
      // 修改收货地址表单数据对象
      editForm:{
        address1:[],
        address2:''
      },
      // 修改收货地址表单验证规则
      editFormRules:{
        address1:[
          {required:true,message:"请选择省市区/县",trigger:'blur'}
        ],
        address2:[
          {required:true,message:"请填写详细地址",trigger:'blur'}
        ]
      },
      // 城市数据
      cityData,
      // 物流详情对话框
      progressDialog:false,
      // 物流信息数据
      progressInfo:modifyData.data,
    }
  },
  created() {
    this.getOrderList();
  },
  methods:{
   async getOrderList(){
      const {data:res}=await this.$http.get(`orders`,{
        params:{
          query:this.queryInfo.query,
          pagenum:this.queryInfo.pagenum,
          pagesize:this.queryInfo.pagesize
        }
      });
      if(res.meta.status !==200){
        return this.$message.error('获取订单列表失败')
      }
      // 请求订单列表数据成功
        this.total=res.data.total;
        this.orderList=res.data.goods
    },
    // 分页器页码改变时触发的函数
    handleCurrentChange(newPage){
      this.queryInfo.pagenum=newPage;
      this.getOrderList()
    },
    // 分页器页码大小改变时触发的函数
    handleSizeChange(newSize){
      this.queryInfo.pagesize=newSize;
      this.getOrderList()
    },
    // 修改收获地址对话框
    showShipingAddress(){
      this.addressVisble=true;

    },
    // 修改收货地址对话框关闭后清空表单
    editFormClosed(){
     this.$refs.editFormRef.resetFields();
    },
    // 物流详情对话框
    showProgressDialog(){
     this.progressDialog=true;
    },


  }
}
</script>

<style scoped>
.el-cascader{
  width: 50%;
}
.el-button{
  width: 90px;
  padding: 12px 10px
}
</style>